<template>
	<view class="relative">
		<!--  -->
		<view class="margin">
			<h1>请选择患者信息</h1>
			<u-gap height="5"></u-gap>
			<text class="uni-text-gray text-sm">以便医生给出更准确的诊疗建议，患者信息仅医生可见</text>
		</view>
		<!--  -->

		<u-gap></u-gap>

		<!--  -->
		<view class="margin">
			<div class="list">
				<div class="item my-10 p-10 border-b border-radius-2" style="border-radius: 40rpx"
					v-for="(item, index) in list" :key="index" :class="index == selectIndex ? 'selected' : ''"
					@click="choice(item.xtUserFamily, index, item)">
					<div class="title font-b" style="font-size: 36rpx">
						{{ item.xtName }}
					</div>
					<div class="message">
						<view class=" ">
							<text class="u-cell-text">{{ sexHandle(item.xtGender) }}</text>
							<text class="u-cell-text">{{ item.xtAge }}岁</text> |
							<text class="u-cell-text">{{ item.weight }}kg</text>|
						</view>
						<view class="">
							<text class="u-cell-text">{{ item.xtPhone }}</text>
						</view>
					</div>
				</div>
			</div>
			<view>
				<u-gap></u-gap>
				<button type="default" class="btn" @click="$pub.go(`/pages_home/addFamily/addFamily`)">
					添加患者
				</button>
			</view>
		</view>
		<!--  -->

		<!--  -->
		<!-- 支付弹框 -->
		<view class="">
			<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :mode="popupData.mode" :show="show"
				:round="popupData.round" :overlay="popupData.overlay" :borderRadius="popupData.borderRadius"
				:closeable="popupData.closeable" :closeOnClickOverlay="popupData.closeOnClickOverlay" @close="close">
				<view class="u-popup-slot">
					<view class="size_17 font_b" style="
              margin-top: 30rpx;
              margin-left: 292rpx;
              margin-right: 292rpx;
              margin-bottom: 60rpx;
            ">
						选择支付
					</view>
					<view class="" style="margin: 100rpx 260rpx">
						<u--text mode="price" size="25" :bold="true" color="#000" :text="Price"></u--text>
					</view>
					<view class="btn flex-cen margin" @click="sendPay">
						<view class="size_16 color_white"> 立即支付 </view>
					</view>
					<u-gap class="margin" height="20" bgColor="#fff"></u-gap>
				</view>
			</u-popup>
		</view>
		<!--  -->

		<view class="fixed w-full" style="bottom: 0">
			<button type="primary" class="piccon_button" @click="createOrder">
				<text class="font-md ml-2">下一步</text>
			</button>
			<u-gap></u-gap>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex";
	export default {
		name: "choicesUser",
		data() {
			return {
				changeShow: false,
				list: [],
				Price: 0,
				//支付
				show: false,
				selectIndex: 0,
				popupData: {
					overlay: true,
					mode: "bottom",
					round: 10,
					closeOnClickOverlay: true,
					closeable: true,
				},
				onder_No: "",
				/*  */
				val: {},
			};
		},
		// computed: {
		// 	Price() {
		// 		return uni.$u.priceFormat(this.form.consultationPrice)
		// 	}
		// },
		onLoad(options) {
			console.log(options, "option");
			if (options.data) {
				this.val = JSON.parse(decodeURIComponent(options.data));
				console.log(this.val, "val");
			}
		},
		methods: {
			// m_interrogation
			...mapMutations("m_interrogation", ["setInterrogationPersonInfo"]),
			/* 支付 */
			async sendPay() {
				let obj = uni.getStorageSync("orderData");

				/* 创建订单 */
				let obj1 = await this.$API.payApi.placeOrder(obj);
				console.log(obj1, "obj1");
				try {
					/* 支付 */
					await this.$API.payApi.sendPay(obj1.orderNo);
					uni.showToast({
						title: "支付成功",
					});
					//Todo 这里我知道有问题，就是不改因为不是我写的
					// uni.setStorageSync('orderNo', obj1.orderNo);

					/* 补充参数 */
					this.val.orderNo = obj1.orderNo; //
					this.val.consultationOrderId = obj1.consultationOrderId;
					this.val.appStatus = obj1.appStatus; //
					/* 跳转聊天 */
					uni.reLaunch({
						url: `/pages_message/chathos/chathos?data=${encodeURIComponent(JSON.stringify(this.val))}`
					})
					// this.$pub.go(
					//   ``
					// );

					// this.$pub.go(`/pages_message/chathos/chathos?data=` + encodeURIComponent(JSON.stringify(this
					// 	.val)) +
					// 	`&orderNo=` + obj1.orderNo + `&appStatus=` + obj1.appStatus + `&consultationOrderId=` + obj1.consultationOrderId)
				} catch (e) {
					uni.showToast({
						title: "支付失败",
					});
				}
			},

			/* 选择患者 */
			choice(xtUserFamily, index, item) {
				this.selectIndex = index;
				this.changeShow = true;
				/*  */
				let obj = uni.setStorageSync("orderData", {
					...uni.getStorageSync("orderData"),
					xtUserFamily: xtUserFamily,
				});
				console.log(item, "item");
				/* 设置问政人 */
				this.setInterrogationPersonInfo(item);
				// console.log(obj,"obj")
				// console.log(xtUserFamily,index,"choice")
			},

			close() {
				this.show = false;
			},

			/*  */
			createOrder() {
				/* 判断是否选了人 */
				if (this.changeShow) {
					this.show = true;
				} else {
					uni.showToast({
						title: "请选择患者",
					});
				}
			},
			/*  */
			sexHandle(sex) {
				switch (sex) {
					case "1":
						return "男";
						break;
					case "2":
						return "女";
						break;
					default:
						break;
				}
			},
			getDetail(item) {
				uni.navigateTo({
					url: `/pages/addFamily/addFamily?data=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
				});
			},
			async getList() {
				/*  */
				let re = await this.$API.familyApi.getList();
				this.list = re;
				/* 默认选择 */
				this.choice(this.list[0].xtUserFamily, 0);
			},
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: "/pages/addFamily/addFamily",
			});
		},
		onShow() {
			this.getList();
			this.show = false;
		},
	};
</script>

<style lang="scss">
	.u-cell-text {
		font-size: 28rpx !important;
	}

	/* 
*/
	.selected {
		// background-color: skyblue;
		background-color: #0dbe97;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 104rpx;
		background: #7976e9;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		opacity: 1;
		color: #fff;
	}

	// .btn {
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	width: 700rpx;
	// 	height: 100rpx;
	// 	background: #7976e9;
	// 	border-radius: 60rpx;
	// 	opacity: 1;
	// 	color: #fff;
	// }
</style>